import { useState, useEffect } from "react";
import style from "./definition.module.scss";
import { page, delById, saveOrUpdate } from "@/api/definition";
import {
  Form,
  Select,
  DatePicker,
  Input,
  Button,
  Table,
  Modal,
  message,
} from "antd";
import TextArea from "antd/es/input/TextArea";
import FormItem from "antd/es/form/FormItem";
import { useNavigate } from "react-router-dom";

function ProcessDefine() {
  const [pageNum] = useState(1);
  const [visible, setVisible] = useState(false);
  const [title, setTitle] = useState("新增");
  const [id, setId] = useState("");
  const [pageSize] = useState(15);
  const [searchForm] = Form.useForm();
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [tabColumns] = useState([
    {
      title: "流程名称",
      width: 100,
      render: (row) => (
        <a
          onClick={() => {
            navigate("/bpmn/process/detail?id=" + row.id);
          }}
        >
          {row.name}
        </a>
      ),
    },
    {
      title: "流程Key",
      width: 100,
      dataIndex: "key",
    },
    {
      title: "描述",
      width: 100,
      dataIndex: "description",
    },
    {
      title: "状态",
      width: 100,
      dataIndex: "status",
    },
    {
      title: "版本",
      width: 60,
      dataIndex: "version",
    },
    {
      title: "创建时间",
      width: 100,
      dataIndex: "createTime",
    },
    {
      title: "操作",
      width: 120,
      fixed: "right",
      render: (row) => (
        <>
          <div>
            <a
              onClick={() => {
                del(row.id);
              }}
            >
              删除
            </a>
            <a
              style={{ marginLeft: "10px" }}
              onClick={() => {
                editor(row);
              }}
            >
              编辑
            </a>
            <a
              style={{ marginLeft: "10px" }}
              onClick={() => {
                navigate("/bpmn/diagram?id=" + row.id);
              }}
            >
              流程设计
            </a>
          </div>
        </>
      ),
    },
  ]);
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    getPage(pageNum, pageSize);
  }, []);

  const del = (id) => {
    Modal.confirm({
      title: "确定删除吗？",
      onOk: () => {
        delById(id).then((res) => {
          if (res.code === 200) {
            getPage(pageNum, pageSize);
            setTimeout(() => {
              message.success("删除成功");
            });
          }
        });
      },
    });
  };

  const editor = (row) => {
    setVisible(true);
    setTitle("编辑");
    form.setFieldsValue(row);
    setId(row.id);
  };

  const getPage = (pageNo, size) => {
    let pageInput = searchForm.getFieldsValue();
    pageInput.pageNum = pageNo;
    pageInput.pageSize = size;
    page(pageInput).then((res) => {
      setDataSource(res.data);
      setTotal(res.total);
    });
  };

  const submit = () => {
    let requestBody = form.getFieldsValue();
    requestBody.id = id;
    saveOrUpdate(requestBody).then((res) => {
      if (res.code === 200) {
        setVisible(false);
        getPage(pageNum, pageSize);
        setTimeout(() => {
          message.success("新增成功");
        });
      }
    });
  };

  const closeModal = () => {
    setVisible(false);
    form.resetFields();
    setId("");
  };

  return (
    <>
      <Modal
        title={title}
        open={visible}
        onCancel={closeModal}
        onOk={submit}
        width={"400px"}
      >
        <Form
          form={form}
          style={{ marginTop: "20px" }}
          initialValues={{}}
          labelAlign={"left"}
        >
          <FormItem name={"name"} label={"流程名称"}>
            <Input placeholder={"流程名称"} />
          </FormItem>
          <FormItem name={"processKey"} label={"流程Key"}>
            <Input placeholder={"流程Key"} />
          </FormItem>
          <FormItem name={"category"} label={"流程分类"}>
            <Input placeholder={"流程分类"} />
          </FormItem>
          <FormItem name={"remark"} label={"备注"}>
            <TextArea />
          </FormItem>
        </Form>
      </Modal>

      <div className={style.definition}>
        <div className={style.top}>
          <Form
            onFinish={() => getPage(pageNum, pageSize)}
            form={searchForm}
            layout={"inline"}
          >
            <FormItem name={"name"} label="名称">
              <Input />
            </FormItem>
            <FormItem name={"startDate"} label="开始日期">
              <DatePicker />
            </FormItem>
            <FormItem name={"endDate"} label="结束日期">
              <DatePicker />
            </FormItem>
            <FormItem name={"status"} label="状态">
              <Select
                allowClear
                style={{ width: "140px", lineHeight: "32px", height: "32px" }}
                size="large"
                options={[{ value: "sample", label: <span>sample</span> }]}
              />
            </FormItem>
            <FormItem>
              <Button htmlType={"submit"} type={"primary"}>
                搜索
              </Button>
            </FormItem>
            <FormItem>
              <Button
                onClick={() => {
                  searchForm.resetFields();
                  getPage(pageNum, pageSize);
                }}
              >
                重置
              </Button>
            </FormItem>
          </Form>
        </div>
        <div className={style.content}>
          <div className="tabTools">
            <Button
              type={"primary"}
              onClick={() => {
                setVisible(true);
                setTitle("新增");
              }}
            >
              新增
            </Button>
          </div>
          <Table
            rowKey={"id"}
            columns={tabColumns}
            dataSource={dataSource}
            pagination={{
              total: total,
              pageSize: pageSize,
              onChange: (page, size) => {
                getPage(page, size);
              },
              position: "bottom",
            }}
          />
        </div>
      </div>
    </>
  );
}
export default ProcessDefine;
